import { FlashList } from "@shopify/flash-list";
import { StyleSheet, Text, TouchableHighlight, View } from "react-native";
import FastImage from "react-native-fast-image";
import { __formatNumber } from "../common/utils";
import apiService from "../services/ApiServices";
import { useEffect, useRef, useState } from "react";
import EmptyView from "./EmptyView";

interface SearchUserRouteProps {
  searchText: string;
}

const SearchUserRoute: React.FC<SearchUserRouteProps> = ({ searchText }) => {
  const [userList, setUserList] = useState<any[]>([]);
  const pageRef = useRef<number>(1);

  useEffect(() => {
    const fetchData = async () => {
      const data = await searchUser(searchText);
      setUserList(data.list);
    };
    fetchData();
  }, [searchText]);

  const searchUser = async (text: string): Promise<any> => {
    const result = await apiService.searchUserList(text, pageRef.current);
    return result?.data;
  };

  const renderItem = (item: any) => {
    console.log(JSON.stringify(item));
    return (
      <View style={styles.contentView}>
        <FastImage
          resizeMode="cover"
          style={styles.avatar}
          source={{ uri: item.avatar }}
        ></FastImage>
        <View style={styles.rightView}>
          <View>
            <Text style={styles.nameLabel}>{item.nickname}</Text>
            <Text style={styles.numLabel}>
              {__formatNumber(item.cartoonCount)}个角色 ·{" "}
              {__formatNumber(item.pipeCount)}个内容
            </Text>
          </View>
          <TouchableHighlight>
            <View style={styles.profileButton}>
              <Text style={styles.profileLabel}>个人主页</Text>
            </View>
          </TouchableHighlight>
        </View>
      </View>
    );
  };

  return (
    <View style={{ flex: 1 }}>
      <FlashList
        data={userList}
        renderItem={({ item }) => renderItem(item)}
        keyExtractor={(item) => item.id.toString()}
        estimatedItemSize={60}
        ListEmptyComponent={() => <EmptyView />}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  contentView: {
    height: 60,
    backgroundColor: "white",
    marginHorizontal: 12,
    marginVertical: 8,
    flexDirection: "row",
    justifyContent: "space-between",
    overflow: "hidden",
  },
  avatar: {
    width: 40,
    height: 40,
    borderRadius: 20,
    marginLeft: 10,
    marginTop: 10,
    resizeMode: "cover",
    overflow: "hidden",
  },
  rightView: {
    flex: 1,
    marginLeft: 10,
    justifyContent: "space-between",
    alignItems: "center",
    backgroundColor: "white",
    flexDirection: "row",
  },
  nameLabel: {
    fontSize: 15,
    marginBottom: 2,
  },
  numLabel: {
    color: "rgba(0,0,0,0.5)",
    fontSize: 14,
    marginTop: 2,
  },
  profileButton: {
    width: 75,
    height: 28,
    backgroundColor: "white",
    borderWidth: 1,
    borderColor: "rgba(0,0,0,0.05)",
    borderRadius: 14,
    justifyContent: "center",
    alignItems: "center",
    marginLeft: 10,
  },
  profileLabel: {
    fontSize: 12,
    color: "black",
  },
});

export default SearchUserRoute;
